<template>
    <el-form :model="promotions" label-width="120px">
        <el-form-item label="开始时间：">
            <el-date-picker @change="setStartTime" v-model="promotions.promotionStartTime" type="datetime"
                placeholder="选择开始时间" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DDT HH:mm:ss" />
        </el-form-item>
        <el-form-item label="结束时间：">
            <el-date-picker @change="setEndTime" v-model="promotions.promotionEndTime" type="datetime" placeholder="选择结束时间"
                format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DDT HH:mm:ss" />
        </el-form-item>
        <el-form-item label="促销价格">
            <el-input @change="setPrice" v-model="promotions.promotionPrice" />
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const promotions = ref({
    promotionStartTime: "", // 开始时间
    promotionEndTime: "", // 结束时间
    promotionPrice: "" // 促销价格
})

const emits = defineEmits<{
    (event: string, value: string): void
}>()

const setStartTime = () => {
    emits("getStartTime", promotions.value.promotionStartTime)
}

const setEndTime = () => {
    emits("getEndTime", promotions.value.promotionEndTime)
}

const setPrice = () => {
    emits("getPrice", promotions.value.promotionPrice)
}

</script>

<style lang="less" scoped>
.el-form-item {
    margin-top: 10px;
}
</style>